<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>萤火虫</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100%;
            width: 100%;
            background: url("img/bg.jpg");
            background-size: cover;
            position: fixed;
        }

        img {
            height: 32px;
            width: 32px;
            display: block;
            position: absolute;
        }
    </style>
</head>
<body>

</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
    var glowworm = {
        maxWidth: $(window).innerWidth() - 50,
        maxHeight: $(window).innerHeight() - 50,
        init: function (num) {
            for (var i = 0; i < num; i++) {
                this.create();
            }
        },
        create: function () {
            var img = $("<img  src='img/1.jpg' />");
            var position = this.randPosition();
            img.css({"left": position.x, "top": position.y});
            $("body").append(img);
            this.fly(img);
        },
        randPosition: function () {
            return {
                x: Math.floor(Math.random() * this.maxWidth) + 20,
                y: Math.floor(Math.random() * this.maxHeight) + 20
            }
        },
        randSpeed: function () {
            return Math.floor(Math.random() * 5000) + 500;
        },
        fly: function (img) {
            var position = this.randPosition();
            var that = this;
            img.animate({"left": position.x, "top": position.y}, this.randSpeed(), function () {
                that.fly($(this));
            })
        }
    }
    glowworm.init(30);
    /*
     function glowworm(num) {
     this.maxWidth = $(window).innerWidth() - 50;
     this.maxHeight = $(window).innerHeight() - 50;
     for (var i = 0; i < num; i++) {
     this.init();
     }
     }
     glowworm.prototype.init = function () {
     var img = $("<img  src='img/1.jpg' />");
     var position = this.randPosition();
     img.css({"left": position.x, "top": position.y});
     $("body").append(img);
     this.fly(img);
     }
     glowworm.prototype.randPosition = function () {//随机的位置
     return {x: Math.floor(Math.random() * this.maxWidth) + 20, y: Math.floor(Math.random() * this.maxHeight) + 20}
     }
     glowworm.prototype.fly = function (img) {
     var position = this.randPosition();
     var that = this;
     img.animate({"left": position.x, "top": position.y}, this.randSpeed(), function () {
     //that.fly(img);
     //alert(this)
     //            alert(img ==this)
     that.fly($(this));
     })
     }
     glowworm.prototype.randSpeed = function () { //随机的速度
     return Math.floor(Math.random() * 5000) + 500;
     }
     */

    //    for (var i = 0; i < 30; i++) {
    // new glowworm(30);
    //    }
    //    //构建一张底图
    //    //构建一个张图 让他自由的飞翔
    //    var maxWidth = $(window).innerWidth() - 50;
    //    var maxHeight = $(window).innerHeight() - 50;
    //    for (var i = 0; i < 30; i++) {
    //        var img = $("<img  src='img/1.jpg' />");
    //        img.css({"left": randX(), "top": randY()})
    //        fly(img);
    //        $("body").append(img);
    //    }
    //    function fly(img) {
    //        img.animate({"left": randX(), "top": randY()}, randSpeed(), function () {
    ////            img.animate({"left": randX(), "top": randY()})
    //            fly(img);
    //        })
    //    }
    //    function randSpeed() {
    //        return Math.floor(Math.random() * 5000) + 500;
    //    }
    //    function randX() {
    //        return Math.floor(Math.random() * maxWidth) + 20;
    //    }
    //    function randY() {
    //        return Math.floor(Math.random() * maxHeight) + 20;
    //    }
</script>
</html>